<template>
	<page-body>
		<view class="page">
			<view class="flex benben-position-layout flex flex-wrap align-center talk_flex_0"
				:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
				<view class='flex flex-wrap align-center justify-between flex-sub talk_fd0_0'>
					<view class='flex flex-wrap align-center talk_fd0_0_c0'>
						<text class='fu-iconfont2  talk_fd0_0_c0_c0' @tap.stop="handleJumpDiy" data-type="back"
							data-url="1">&#xE794;</text>
					</view>
					<view class='flex flex-wrap align-stretch justify-center'>
						<text class='talk_fd0_0_c1_c0'>签到 </text>
					</view>
					<view class='flex flex-wrap align-center justify-end talk_fd0_0_c0'>
					</view>
				</view>
			</view>
			<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
			<view class="">
				<view class="title-01">
					二维码签到
				</view>
				<view class="title-02">
					请扫一扫发起者提供的二维码完成签到
				</view>
				<view class="gesture-container">
					<image style="width: 400rpx; height: 400rpx;" src="/static/sign/03.png" mode=""></image>

					<view class="scan-QR" @click.stop="startQR">
						立即扫码
					</view>
				</view>
			</view>
			<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
			<!---flex布局flex布局开始-->
			<view class="flex flex-direction flex-wrap align-stretch benben-flex-layout talk_flex_1">

			</view>
			<!---flex布局flex布局结束-->
		</view>
	</page-body>
</template>
<script>
	import {
		validate
	} from '@/common/utils/validate.js'
	import wx from 'weixin-js-sdk'

	export default {
		data() {
			return {
				teaching_id: "",
				msgid:'',//系统ing消息过来的签到
			}
		},
		// 小程序页面生命周期，如果是 uni-app 可以写
		onLoad(options) {
			this.teaching_id = options.teaching_id
			this.msgid = options.msgid?options.msgid:''
			this.getWxConfig()
		},
		computed: {
			// 计算属性
		},
		watch: {
			// 监听器
		},
		methods: {
			// 从后端获取配置信息
				async  getWxConfig() {
					console.log(11111111111111)
					console.log(uni.getStorageSync('WXInfo'))
					let wxinfo={}
					
					let info = await this.$api.post(global.apiUrls.post68e4689b6e176, {
						href:location.href
						// aid: this.course
					});
					console.log(info)		
					if (info.data.code == 1) {
						// uni.setStorageSync('WXInfo',info.data.data)
							wxinfo=info.data.data
					}
					
					  console.log(wxinfo)
					
					
				  // 首先需要配置微信JS-SDK
					  wx.config({
						debug: false, // 生产环境设为false
						appId: wxinfo.appId,
						timestamp: wxinfo.timestamp,
						nonceStr:wxinfo.nonceStr,
						signature: wxinfo.signature,
						jsApiList: [
						  'scanQRCode' // 必须将scanQRCode添加到jsApiList中
						]
					  });
				},
			// 方法
			startQR() {
				let _this=this
				console.log('startQR')
				wx.ready(function() {
					 console.log('SDK配置成功');
				  // 配置成功后调用扫一扫
				  wx.scanQRCode({
				    needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果
					onlyFromCamera:true,//只允许相机
				    // scanType: ["qrCode"], // 可以指定扫二维码还是一维码，默认二者都有
				    success: function (res) {
				      // 当needResult 为 1 时，扫码返回的结果
				      const result = res.resultStr; 
				      console.log('扫描结果:', result);
					  const match = res.resultStr.match(/check_id=([^&]+)/);
					  const results = match ? match[1] : null;
					  console.log(results)
					  // let code = JSON.parse(res.resultStr).qrCode
				      // alert('扫描结果: ' + results);
					   _this.sm(results)
				    },
				    fail: function (error) {
				      console.error('扫描失败:', error);
				      alert('扫描失败，请重试');
				    }
				  });
				});
				return
				uni.scanCode({
					onlyFromCamera: true,
					success: async (res) => { // 改成箭头函数
						console.log('222222222222222222', res.result);
						const match = res.result.match(/check_id=([^&]+)/);
						const result = match ? match[1] : null;

						let datastate = await this.$api.post(global.apiUrls.post68aecbf3b2237, {
							teaching_id: this.teaching_id,
							check_password: result
						});
						if(this.msgid){
							this.getred()
						}
						console.log('11111111111111', datastate);
						// 成功1 超时2
						if (datastate.data.code == 1 || datastate.data.code == 2) {
							this.$urouter.redirectTo(
								`/pages/course/resultSign/resultSign?code=${datastate.data.code}&time=${datastate.data.time}`
							);
						}
						// 失败
						else if (datastate.data.code == -1) {
							uni.showToast({
								title: "签到失败，请重试",
								icon: "none"
							});
						}
					}
				});
			},
			async sm(code){
				let datastate = await this.$api.post(global.apiUrls.post68aecbf3b2237, {
					teaching_id: this.teaching_id,
					check_password: code
				});
				if(this.msgid){
					this.getred()
				}
				console.log('11111111111111', datastate);
				// 成功1 超时2
				if (datastate.data.code == 1 || datastate.data.code == 2) {
					this.$urouter.redirectTo(
						`/pages/course/resultSign/resultSign?code=${datastate.data.code}&time=${datastate.data.time}`
					);
				}
				// 失败
				else if (datastate.data.code == -1) {
					uni.showToast({
						title: "签到失败，请重试",
						icon: "none"
					});
				}
			},
				// 公告 已读
				async getred(){
					let datalist = await this.$api.get(global.apiUrls.post68413be3159e9, {
						aid: this.msgid,
					});
								
					// if (datalist.data.code != 1) {
					// 	this.$message.info(datalist.data.msg);
					// 	return
					// }
				},

		},

		onReady() {},
		onShow() {},
		onHide() {},
		onUnload() {},
	}
</script>
<style lang="scss" scoped>
	.gesture-container {
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		margin-top: 192rpx;
	}

	.title-01 {
		font-weight: 500;
		font-size: 36rpx;
		color: #333333;
		margin-top: 106rpx;
		text-align: center
	}

	.title-02 {
		font-weight: 400;
		font-size: 28rpx;
		color: #999999;
		margin-top: 20rpx;
		text-align: center
	}

	.scan-QR {
		width: 304rpx;
		height: 84rpx;
		background: #145EFD;
		border-radius: 42rpx 42rpx 42rpx 42rpx;
		font-weight: 500;
		font-size: 36rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 84rpx;
		margin-top: 56px;
	}

	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background: #FFF;
		background-size: 100% auto;
	}

	.talk_flex_0 {
		background: #fff;
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 10;
		top: 0rpx;
		background-size: 100% auto !important;
	}

	.talk_fd0_0_c1_c0 {
		font-size: 36rpx;
		font-weight: 700;
		color: #333333;
		line-height: 50rpx;
	}

	.talk_fd0_0_c0_c0 {
		font-size: 36rpx;
		color: #333;
	}

	.talk_fd0_0_c0 {
		width: 120rpx;
	}

	.talk_fd0_0 {
		padding: 0rpx 32rpx 0rpx 32rpx;
	}

	.talk_flex_1 {
		padding: 24rpx;
	}
</style>